<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <!-- <div class="filter-container"> -->
    <el-row style="width:100%;">

      <el-input
        clearable
        v-model="filter.mainBudgetAccount"
        class="filter-item"
        style="width: 200px;marginRight:12px"
        placeholder="输入预算编码或预算科目名"
      />
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        style="marginRight:12px;"
        @click="netQueryBudgetMain"
      >搜索</el-button>
      <span style="fontSize:16px;fontWeight:bold;">是否停用</span>
      <el-row style="display: inline-block;margin-left: 12px;">
        <el-radio-group
          v-model="filter.isStop"
          @change="netQueryBudgetMain"
        >
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-row>
    </el-row>

    <!-- 导入操作 -->
    <el-row
      type="flex"
      justify="end"
      style="width:100%;"
    >
      <el-button
        class="filter-item"
        type="text"
        @click="addBtnClickHandle"
      >新增</el-button>
      <el-button
        class="filter-item"
        type="text"
        @click=""
      >导入</el-button>
      <el-button
        class="filter-item"
        type="text"
        @click=""
      >导入模板</el-button>
    </el-row>

    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row
      style="marginTop:12px;"
    >

      <el-table-column
        align="center"
        label="序号"
        prop="id"
        width="110"
      />
      <el-table-column
        align="center"
        label="核算科目编码"
        prop="mainBudgetAccount"
      />
      <el-table-column
        align="center"
        label="核算科目名"
        prop="budgetAccountName"
      />
      <el-table-column
        width="110"
        align="center"
        label="科目类型"
        prop="subjectType"
      />
      <el-table-column
        width="110"
        align="center"
        label="损益"
        prop="profitAndLoss"
      />
      <el-table-column
        width="110"
        align="center"
        label="借贷"
        prop="toLoan"
      />
      <el-table-column
        width="110"
        align="center"
        label="业务类型"
        prop="businessType"
      />
      <el-table-column
        width="110"
        align="center"
        label="税率(一般)"
        prop="taxRateGeneral"
      />
      <el-table-column
        width="110"
        align="center"
        label="税率(小规模)"
        prop="taxRateSmallScale"
      />
      <el-table-column
        width="110"
        align="center"
        label="预算科目名"
        prop="subjectName"
      />
      <el-table-column
        width="110"
        align="center"
        label="预算科目编码"
        prop="subjectCode"
      />
      <el-table-column
        align="center"
        label="其他"
        prop="other"
      />
      <el-table-column
        width="500"
        align="center"
        label="操作"
        fixed="right"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            @click="dateBtnClickHandle(scope.row)"
          >设置有效期</el-button>
          <el-button
            type="text"
            size="mini"
            @click="bindBtnClickHandle(scope.row)"
          >绑定附预算科目</el-button>
          <el-button
            type="text"
            size="mini"
            @click="editBtnClickHandle(scope.row)"
          >编辑</el-button>
          <el-button
            type="text"
            size="mini"
            @click="stopBtnClickHandle(scope.row)"
          >停用</el-button>
          <el-button
            type="text"
            size="mini"
            @click="delBtnClickHandle(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="filter.page"
      :limit.sync="filter.pageSize"
      @pagination="netQueryBudgetMain"
    />

    <!-- -----------------------新增编辑---------------------------- -->
    <el-dialog
      :title="currentModel.id == undefined?'新增预算科目':'编辑预算科目'"
      :visible.sync="showEditAlert"
      width="40%"
      @before-close="closeEditAndAddDialogHandle"
      @close="closeEditAndAddDialogHandle"
    >

      <el-form
        ref=""
        :model="currentModel"
        status-icon
        label-position="left"
        label-width="100px"
        style="width: 400px; margin-left: 50px"
      >
        <el-form-item
          label="核算科目名称"
          prop=""
          v-if="currentModel.id == undefined"
        >
          <el-row
            :gutter="0"
            style="width:100%"
          >
            <el-col span="6">
              <el-select
                v-model="budgetAccountSelect01"
                placeholder="请选择"
                @change="handleBudgetAccountSelect01"
              >
                <el-option
                  :value="item"
                  v-for="(item,idx) in budgetAccountList01"
                  :label="item.budgetAccountName"
                  :key="idx"
                />
              </el-select>
            </el-col>
            <el-col span="6">
              <el-select
                v-model="budgetAccountSelect02"
                filterable
                placeholder="请选择"
                @change="handleBudgetAccountSelect02"
              >
                <el-option
                  :value="item"
                  v-for="(item,idx) in budgetAccountList02"
                  :label="item.budgetAccountName"
                  :key="idx"
                />
              </el-select>
            </el-col>
            <el-col span="6">
              <el-select
                v-model="budgetAccountSelect03"
                filterable
                placeholder="请选择"
                @change="handleBudgetAccountSelect03"
              >
                <el-option
                  :value="item"
                  v-for="(item,idx) in budgetAccountList03"
                  :label="item.budgetAccountName"
                  :key="idx"
                />
              </el-select>
            </el-col>
            <el-col span="6">
              <el-input v-model="lastAccouontModel.budgetAccountName"></el-input>
            </el-col>
          </el-row>

        </el-form-item>

        <el-form-item
          label="核算科目编码"
          prop=""
          v-if="currentModel.id == undefined"
        >

          <el-row style="width:100%;">
            <el-col span="8">
              <el-input
                disabled
                v-model="lastAccouontModel.mainBudgetAccount"
              ></el-input>
            </el-col>
            <el-col span="16">
              <el-input v-model="lastAccouontModel.mainBudgetAccount"></el-input>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item
          label="科目类型"
          prop=""
        >
          <el-input v-model="currentModel.subjectType"></el-input>
        </el-form-item>

        <el-form-item
          label="业务类型"
          prop=""
        >
          <el-input
            v-model="currentModel.businessType"
            style="width:100%;"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="损益"
          prop=""
        >
          <el-input
            v-model="currentModel.profitAndLoss"
            style="width:100%;"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="税率(一般)"
          prop=""
        >
          <el-input
            v-model="currentModel.taxRateGeneral"
            style="width:100%;"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="税率(小规模)"
          prop=""
        >
          <el-input
            v-model="currentModel.taxRateSmallScale"
            style="width:100%;"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="有效期"
          prop=""
        >
          <el-date-picker
            v-model="selectedDate"
            style="width:100%;"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="bindpickoptn"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item
          label="预算科目名称"
          prop=""
        >
          <el-input
            v-model="currentModel.subjectName"
            style="width:100%;"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="预算科目编码"
          prop=""
        >
          <el-input
            v-model="currentModel.subjectCode"
            style="width:100%;"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="其他"
          prop=""
        >
          <el-input
            v-model="currentModel.other"
            style="width:100%;"
          ></el-input>
        </el-form-item>

      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="doneEditHandle"
        >保存</el-button>
        <el-button
          type="default"
          @click="showEditAlert = false"
        >取消</el-button>
      </span>
    </el-dialog>

    <!-- -----------------------设置日期对话框---------------------------- -->
    <el-dialog
      title="设置有效期"
      :visible.sync="showSetDateAlert"
      width="40%"
    >

      <el-form
        ref=""
        :model="currentModel"
        status-icon
        label-position="left"
        label-width="100px"
        style="width: 400px; margin-left: 50px"
      >
        <el-form-item
          label="编码"
          prop=""
        >
          <el-input
            v-model="currentModel.mainBudgetAccount"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item
          label="名称"
          prop=""
        >
          <el-input
            v-model="currentModel.budgetAccountName"
            disabled
          ></el-input>
        </el-form-item>

        <el-form-item
          label="有效期"
          prop=""
        >
          <el-date-picker
            v-model="selectedDate"
            style="width:100%;"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="bindpickoptn"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="doneDateHandle"
        >保存</el-button>
        <el-button
          type="default"
          @click="showSetDateAlert = false"
        >取消</el-button>
      </span>
    </el-dialog>

    <!-- 绑定科目对话框 -->
    <el-dialog
      title="绑定预算科目"
      :visible.sync="showBindAlert"
      width="40%"
    >
      <el-form
        ref=""
        :model="currentModel"
        status-icon
        label-position="left"
        label-width="100px"
        style="width: 400px; margin-left: 50px"
      >
        <el-form-item
          label="预算科目名"
          prop=""
        >
          <el-input v-model="currentModel.subjectName" />
        </el-form-item>
        <el-form-item
          label="预算科目编码"
          prop="nickname"
        >
          <el-input v-model="currentModel.subjectCode" />
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="doneBindHandle"
        >保存</el-button>
        <el-button
          type="default"
          @click="showBindAlert = false"
        >取消</el-button>
      </span>
    </el-dialog>

    <!-- 停用对话框 -->
    <el-dialog
      title="主营业务收入 准备停用"
      :visible.sync="showStopAlert"
      width="40%"
    >
      <span>是否停用</span>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="danger"
          @click="doneStopHandle"
        >是</el-button>
        <el-button
          type="default"
          @click="showStopAlert = false"
        >否</el-button>
      </span>
    </el-dialog>

    <!-- 删除对话框 -->
    <el-dialog
      title="主营业务收入 准备删除"
      :visible.sync="showDelAlert"
      width="40%"
    >
      <span>是否删除</span>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="danger"
          @click="doneDelHandle"
        >是</el-button>
        <el-button
          type="default"
          @click="showDelAlert = false"
        >否</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryBudgetMain,
  modifyBudgetMain,
  saveBudgetMain,
  queryByParentAccount,
  deleteBudgetMain,
} from "@/api/budget";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import moment from "moment";

export default {
  name: "User",
  components: { Pagination },
  data() {
    return {
      list: [],
      showDelAlert: false,
      showStopAlert: false,
      showBindAlert: false,
      showSetDateAlert: false,
      showEditAlert: false,

      bindpickoptn: {
        onPick: ({ minDate, maxDate }) => {
          let mistr = moment(minDate).format("YYYY-MM-DD");
          let maxstr = moment(maxDate).format("YYYY-MM-DD");
          let miDate = new Date(mistr.replace(/-/, "/"));
          miDate.setDate(miDate.getDate() + 1);
          let maDate = new Date(maxstr.replace(/-/, "/"));
          maDate.setDate(maDate.getDate() + 1);
          this.currentModel.startTime = miDate;
          this.currentModel.endTime = maDate;

          console.log(this.currentModel.startTime);
          console.log(this.currentModel.endTime);
        },
      },
      total: 0,
      listLoading: false,
      currentModel: {},
      filter: {
        page: 1,
        pageSize: 20,
        isStop: 0,
        mainBudgetAccount: undefined,
      },
      selectedDate: [],
      budgetAccountList01: [],
      budgetAccountList02: [],
      budgetAccountList03: [],
      budgetAccountList04: [],
      budgetAccountSelect01: "",
      budgetAccountSelect02: "",
      budgetAccountSelect03: "",
      budgetAccountSelect04: "",
      lastAccouontModel: {},
    };
  },
  created() {
    this.netQueryBudgetMain();
    this.netQueryByParentAccount("", 1);
  },
  methods: {
    netQueryBudgetMain() {
      this.listLoading = true;
      queryBudgetMain(this.filter)
        .then((response) => {
          let { list, total } = response;
          this.list = list;
          this.total = this.list.length;
          this.total = total;
          this.listLoading = false;
        })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
    },

    handleFilter() {},
    handleDownload() {},

    handleDetail(row) {},
    handleUserUpdate() {},

    dateBtnClickHandle(row) {
      this.currentModel = row;
      this.selectedDate = [
        this.currentModel.startTime ?? "",
        this.currentModel.endTime ?? "",
      ];
      this.showSetDateAlert = true;
    },
    doneDateHandle() {
      this.netModifyBudgetMain();
    },

    bindBtnClickHandle(row) {
      this.currentModel = row;
      this.showBindAlert = true;
    },
    doneBindHandle() {
      this.netModifyBudgetMain();
    },
    addBtnClickHandle() {
      this.currentModel = {};
      this.showEditAlert = true;
    },

    editBtnClickHandle(row) {
      this.currentModel = row;
      this.selectedDate = [
        this.currentModel.startTime ?? "",
        this.currentModel.endTime ?? "",
      ];
      this.showEditAlert = true;
    },
    doneEditHandle() {
      let { id } = this.currentModel;
      let self = this;
      if (id == undefined) {
        let { mainBudgetAccount, budgetAccountName } = this.lastAccouontModel;
        this.currentModel.mainBudgetAccount = mainBudgetAccount;
        this.currentModel.budgetAccountName = budgetAccountName;
        saveBudgetMain(this.currentModel).then((response) => {
          self.$message.success("操作成功");
          self.currentModel = {};
          self.lastAccouontModel = {};
          self.netQueryBudgetMain();
          self.showEditAlert = false;
        });
      } else {
        this.modifyBudgetMain();
      }
    },

    stopBtnClickHandle(row) {
      this.currentModel = row;
      this.showStopAlert = true;
    },
    doneStopHandle() {
      this.currentModel.isStop = 1;
      this.netModifyBudgetMain();
    },

    delBtnClickHandle(row) {
      this.currentModel = row;
      this.showDelAlert = true;
    },
    doneDelHandle() {
      deleteBudgetMain(this.currentModel).then((response) => {
        self.$message.success("操作成功");
        self.netQueryBudgetMain();
        self.showDelAlert = false;
        self.selectedDate = "";
      });
    },

    netModifyBudgetMain() {
      let self = this;
      modifyBudgetMain(this.currentModel)
        .then((response) => {
          self.$message.success("操作成功");
          self.netQueryBudgetMain();
          self.showDelAlert = false;
          self.showStopAlert = false;
          self.showBindAlert = false;
          self.showSetDateAlert = false;
          self.showEditAlert = false;
          self.selectedDate = "";
        })
        .catch(() => {
          self.showDelAlert = false;
          self.showStopAlert = false;
          self.showBindAlert = false;
          self.showSetDateAlert = false;
          self.showEditAlert = false;
          self.selectedDate = "";
        });
    },

    budgetAccountSelect() {},

    closeEditAndAddDialogHandle() {
      this.budgetAccountList02 = [];
      this.budgetAccountList03 = [];
      this.budgetAccountList04 = [];
      this.budgetAccountSelect01 = "";
      this.budgetAccountSelect02 = "";
      this.budgetAccountSelect03 = "";
      this.budgetAccountSelect04 = "";
      this.lastAccouontModel = {};
      this.selectedDate = [];
      this.showEditAlert = false;
    },

    netQueryByParentAccount(mainBudgetAccount, level) {
      let self = this;
      queryByParentAccount(mainBudgetAccount).then((response) => {
        switch (level) {
          case 1:
            {
              self.budgetAccountList01 = response;
              self.budgetAccountList02 = [];
              self.budgetAccountList03 = [];
              self.budgetAccountList04 = [];
            }
            break;
          case 2:
            {
              self.budgetAccountList02 = response;
              self.budgetAccountList03 = [];
              self.budgetAccountList04 = [];
            }
            break;
          case 3:
            {
              self.budgetAccountList03 = response;
              self.budgetAccountList04 = [];
            }
            break;
          case 4:
            {
              self.budgetAccountList04 = response;
            }
            break;

          default:
            break;
        }
      });
    },

    handleBudgetAccountSelect01(evl) {
      debugger;
      this.lastAccouontModel = evl;
      this.netQueryByParentAccount(
        this.budgetAccountSelect01.mainBudgetAccount,
        2
      );
    },
    handleBudgetAccountSelect02(evl) {
      this.lastAccouontModel = evl;
      this.netQueryByParentAccount(
        this.budgetAccountSelect02.mainBudgetAccount,
        3
      );
    },
    handleBudgetAccountSelect03(evl) {
      this.lastAccouontModel = evl;
      this.netQueryByParentAccount(
        this.budgetAccountSelect03.mainBudgetAccount,
        4
      );
    },
  },
};
</script>
